/**
 * 事故原因
 */

 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
 import { Modal, Input, Radio, Select } from 'antd';
 import React, { useState, useCallback, useEffect } from 'react';
 import { useRequest } from '@umijs/hooks';
 import styles from './index.less';
 import moment from 'moment';

 import {
  allAccidentClose
 } from '../service';
 import { Const } from '../../Const';

 const FormItem = Form.Item;
 const Option = Select.Option;

 const AllAccidentReason = props => {

   const { modalVisible, onCancel, form, onSubmit, ownerType, accidentList = [] } = props;

   // 事故单结案
   const { run: runAllAccidentClose } = useRequest(params => allAccidentClose(params), {
     manual: true,
     onSuccess (res) {
       console.log(res, '事故单结案');
       onSubmit();
     }
   })

   // 确定
   const okHandle = useCallback(() => {
     form.validateFields((err, fieldsValue) => {
       if (err) return;
       let arr = [];
       fieldsValue.pkgAccidentCloseDtoList.forEach((item, index) => {
         item.accidentId = accidentList[index].accidentId;
         arr.push(item);
       });
       form.resetFields();
       fieldsValue.pkgAccidentCloseDtoList = arr;
       console.log(fieldsValue, '--fieldsValue--')
       runAllAccidentClose(fieldsValue);
     });
   }, [form, accidentList]);

   return (
     <Modal
       destroyOnClose
       title="批量结案"
       visible={modalVisible}
       onOk={okHandle}
       onCancel={onCancel}
       maskClosable={false}
       width={'90%'}
     >
       {accidentList.map((item, index) => (
         <div className={styles.allAccidentReasonItem} key={index}>
          <div style={{ flex: '0 0 20%' }}>事故单编号：{item.accidentId}</div>
          <div style={{ flex: '0 0 10%' }}>旅客姓名：{item.paxName}</div>
          <div style={{ flex: '0 0 10%' }}>结案状态：未结案</div>
          <FormItem {...Const.formLayoutFour} label="事故单原因" style={{ flex: '0 0 30%' }}>
            {form.getFieldDecorator(`pkgAccidentCloseDtoList[${index}].accidentReason`, {
              rules: [
                { required: true, message: '请选择事故单原因' }
              ],
              initialValue: ''
            })(
              <Select
                allowClear
                showSearch
                placeholder="请选择"
                style={{ width: '100%' }}>
                {Const.accidentReasonList.map((item, index) => {
                  if (ownerType === 1 || ownerType === 7) {
                    if (item.value === 13) {
                      return <Option key={item.value} value={item.value}>{item.label}</Option>
                    }
                  } else {
                    return <Option key={item.value} value={item.value}>{item.label}</Option>
                  }
                })}
              </Select>
            )}
          </FormItem>
          <FormItem {...Const.formLayoutFour} label="责任航站" style={{ flex: '0 0 30%' }}>
            {form.getFieldDecorator(`pkgAccidentCloseDtoList[${index}].dutyTerminal`, {
              rules: [
                { required: true, message: '请选择责任航站' }
              ],
              initialValue: ''
            })(
              <Radio.Group options={Const.dutyTerminalList}></Radio.Group>
            )}
          </FormItem>
        </div>
       ))}
     </Modal>
   )
 };

 export default Form.create()(AllAccidentReason);
